class CaiDan extends HTMLElement {
	sheZhiKuang= null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })

		let style = document.createElement('style')
		style.textContent = `
			.cai-dan-xiang {
				cursor: pointer;
				font-size: 15px;
				color: #fff;
				text-shadow: 2px 2px 3px #000;
				background: conic-gradient(rgba(100, 200, 255, 1.0), rgba(255, 100, 200, 1.0), rgba(100, 200, 255, 1.0));
				clip-path: path('M 0 15 L 15 0 L 70 0 L 70 25 L 55 40 L 0 40 z');
				width: 70px;
				height: 40px;
				margin-left: 0.5rem;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 1;
			}
			
			.cai-dan-xiang:hover {
				filter: brightness(1.3);
			}
		`
		shadow.appendChild(style)
		// 全屏
		let quanPingAnNiu = document.createElement('div')
		quanPingAnNiu.classList.add('cai-dan-xiang')
		quanPingAnNiu.innerHTML = '全屏'
		// 全屏锁定横屏，解决手机端横屏问题
		quanPingAnNiu.addEventListener('pointerdown', () => {
			if (document.fullscreenElement == document.documentElement) document.exitFullscreen()
			else document.documentElement.requestFullscreen().then(() => window.screen.orientation.lock("landscape"))
		})
		shadow.appendChild(quanPingAnNiu)
		// 设置
		let sheZhiAnNiu = document.createElement('div')
		sheZhiAnNiu.classList.add('cai-dan-xiang')
		sheZhiAnNiu.innerHTML = '设置'
		shadow.appendChild(sheZhiAnNiu)

		this.sheZhiKuang = document.createElement('she-zhi')
		let tanKuang = document.createElement('dialog', { is: 'tan-kuang' })
		tanKuang.setAttribute('biao-ti', '设置')
		tanKuang.appendChild(this.sheZhiKuang)
		tanKuang.jiaZai()
		sheZhiAnNiu.addEventListener('pointerdown', () => {
			this.sheZhi(tanKuang)
		})
		document.addEventListener('keydown', shiJian => {
			if (shiJian.code == 'Escape') {
				this.sheZhi(tanKuang)
			}
		})
		// 编辑模式
		let bianJiMoShiAnNiu = document.createElement('div')
		bianJiMoShiAnNiu.classList.add('cai-dan-xiang')
		bianJiMoShiAnNiu.innerHTML = '编辑模式'
		bianJiMoShiAnNiu.addEventListener('pointerdown', () => {
			this.bianJiMoShi()
		})
		shadow.appendChild(bianJiMoShiAnNiu)
		// 制造模式
		let zhiZaoMoShiAnNiu = document.createElement('div')
		zhiZaoMoShiAnNiu.classList.add('cai-dan-xiang')
		zhiZaoMoShiAnNiu.innerHTML = '制造模式'
		zhiZaoMoShiAnNiu.addEventListener('pointerdown', () => {
			this.zhiZaoMoShi()
		})
		shadow.appendChild(zhiZaoMoShiAnNiu)
	}
	
	connectedCallback() {
		this.style = `
			position: absolute;
			right: 1rem;
			bottom: 1rem;
			display: flex;
			flex-direction: row-reverse;
			z-index: 1;
		`
	}
	
	quanPing() {
		if (document.fullscreenElement == document.documentElement) document.exitFullscreen()
		else document.documentElement.requestFullscreen()
	}
	
	sheZhi(tanKuang) {
		if (tanKuang.open) tanKuang.close()
		else {
			tanKuang.show() // showModal不会跟随body旋转
			this.sheZhiKuang.gengXinKuaiJieJian()
		}
	}

	bianJiMoShi() {}

	zhiZaoMoShi() {}
}

customElements.define('cai-dan', CaiDan)
